<template>
  <MainLayout>
    <section class="forum-header">
      <div class="container">
        <div class="forum-header-title">定价</div>
        <div class="forum-header-content">工作室和工作空间计划</div>
      </div>
    </section>

    <section class="price-section">
      <div class="container">
        <div class="price-content">
          <div class="price-item" v-for="(item, i) in pricingOptions" :key="i">
            <el-switch
              class="price-switch"
              v-if="i == 1"
              v-model="yearOrMonth"
              size="small"
              active-color="#000"
              active-text="年度的"
              inactive-text="月刊"
            />
            <div class="price-tag">
              <div class="price-tag-text" @click="clickItem(i)">{{ item.tag }}</div>
            </div>
            <div class="price-box">
              <div class="price-current">{{ item.price }}</div>
              <div class="price-current-desc" v-if="item.priceDesc">{{ item.priceDesc }}</div>
            </div>
            <div class="price-desc">{{ item.desc }}</div>
            <div class="price-discount">{{ item.discount || "" }}</div>
            <div class="price-button">{{ item.btnText }}</div>
            <div class="tips-title">{{ item.tipsTitle }}</div>
            <ul class="tips-list">
              <li v-for="(tip, j) in item.tipsList" :key="j" class="tips-item" v-html="tip"></li>
            </ul>
            <ul class="plus-list" v-if="item.plusList">
              <li v-for="(plus, k) in item.plusList" :key="k" class="plus-item" v-html="plus"></li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <section class="logo-list-section">
      <div class="container">
        <div class="logo-list">
          <img class="logo-item-img" :src="`/images/price/icon/${i}.png`" v-for="i in 7" :key="i" alt="" />
        </div>
      </div>
    </section>

    <section class="plan-section">
      <div class="container">
        <div class="plan-content">
          <div class="plan-title">计划比较</div>
          <div class="plan-desc">所有计划中都包含设计模式、动画、交互和UI构建器的功能齐全的工作室。</div>
          <div class="plan-img-list">
            <img src="/images/price/1.jpg" alt="" />
            <img src="/images/price/2.jpg" alt="" />
            <img src="/images/price/3.jpg" alt="" />
            <img src="/images/price/4.jpg" alt="" />
          </div>
          <div class="plan-img-tips">
            除非用户取消，否则工作空间计划的订阅会在每个账单周期结束时自动续订。请参阅服务条款。
          </div>
        </div>
      </div>
    </section>

    <section class="question-section">
      <div class="container">
        <div class="question-content">
          <div class="question-title">常见问题</div>
          <el-collapse class="question-list" v-model="activeName" accordion>
            <el-collapse-item
              :title="item.title"
              :name="i"
              v-for="(item, i) in questionList"
              :key="i"
              class="question-item"
              icon="Plus"
            >
              {{ item.content }}
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </section>
  </MainLayout>
</template>

<script setup>
  import { useRouter } from "vue-router";
  const router = useRouter();
  import { ref } from "vue";
  let pricingOptions = [
    {
      tag: "免费",
      price: "0元",
      desc: "学习基础知识，开始你的第一个项目。",
      btnText: "免费开始",
      tipsTitle: "特点：",
      tipsList: [
        "1个工作区",
        "1个客户端",
        "3个项目",
        "导入标准3D网格文件",
        "工作室-设计模式",
        "工作室-动画",
        "工作室-互动",
        "工作室-用户界面构建器",
        "工作室-预览",
      ],
    },
    {
      tag: "专业",
      price: "25元/月",
      priceDesc: "每年收费300元",
      desc: "适用于年收入高达100万元的个人，希望提升其内容。",
      discount: "每年计费时节省45%",
      btnText: "选择计划",
      tipsTitle: "包含所有免费功能，以及：",
      tipsList: [
        "100个项目",
        "<strong>无限输出</strong>（usdz、glb、gltf...)",
        "<strong>嵌入</strong>3000多个平台",
        "<strong>分享公共链接</strong>-品牌",
        "无应用程序<strong>增强现实</strong>",
        "Figma插件",
      ],
    },
    {
      tag: "企业",
      price: "300元/月",
      priceDesc: "每年收费3600元",
      desc: "对于年收入高达100万元的企业，希望提升其内容。",
      discount: "该计划包含2个客户端",
      btnText: "选择计划",
      tipsTitle: "包含所有专业版功能，以及：",
      tipsList: [
        "500个项目",
        "<strong>2个客户端</strong>（业主+编辑）",
        "开发人员<strong>API查看器</strong>",
        "<strong>CAD导入</strong>(STEP)",
        "<strong>无品牌</strong>公共链接",
        "10万次浏览或5GB流量/月",
        "版本历史",
      ],
    },
    {
      tag: "商业",
      price: "定制化",
      desc: "适用于寻求企业级可扩展性、安全性和性能的企业。",
      discount: "了解更多",
      btnText: "联系我们",
      tipsTitle: "包含所有企业版功能，以及：",
      tipsList: [
        "<strong>用户管理</strong>（自定义角色）",
        "<strong>安全的私人链接共享</strong>",
        "<strong>无限项目</strong>",
        "<strong>个人入职</strong>",
        "链接数据库(电子表格csv)",
        "评论和通知",
        "ISO27001认证平台",
        "专职客户经理/支持",
      ],
      plusList: [
        "<strong>多个工作区</strong>",
        "<strong>额外客户端</strong>",
        "额外视图",
        "CDN和域屏蔽",
        "单次登录(SSO/SAML)",
      ],
    },
  ];
  let yearOrMonth = ref(true);

  let questionList = ref([
    {
      title: "什么是工作空间？",
      content: "什么是工作空间？",
    },
    {
      title: "专业工作区订阅是如何运作的？",
      content: "专业工作区订阅是如何运作的？",
    },
    {
      title: "谁负责团队的工作空间？",
      content: "谁负责团队的工作空间？",
    },
    {
      title: "我如何邀请团队成员加入团队？",
      content: "我如何邀请团队成员加入团队？",
    },
    {
      title: "你如何定义一个客户端？",
      content: "你如何定义一个客户端？",
    },
    {
      title: "当我将成员添加到工作区时会发生什么？",
      content: "当我将成员添加到工作区时会发生什么？",
    },
    {
      title: "团队成员需要自己的订阅吗？",
      content: "团队成员需要自己的订阅吗？",
    },
    {
      title: "什么是视图，它们是如何计算的？",
      content: "什么是视图，它们是如何计算的？",
    },
    {
      title: "公众观点限制是什么，我如何提高它们？",
      content: "公众观点限制是什么，我如何提高它们？",
    },
    {
      title: "你有月度和年度账单选项吗？",
      content: "你有月度和年度账单选项吗？",
    },
    {
      title: "专业计划是重复的吗？",
      content: "专业计划是重复的吗？",
    },
    {
      title: "你能给我发一张发票吗？",
      content: "你能给我发一张发票吗？",
    },
    {
      title: "我如何取消订阅？",
      content: "我如何取消订阅？",
    },
    {
      title: "取消订阅计划后，我的项目会怎么样？",
      content: "取消订阅计划后，我的项目会怎么样？",
    },
    {
      title: "你们有学校和班级的特别折扣吗？",
      content: "你们有学校和班级的特别折扣吗？",
    },
    {
      title: "我如何去除AnyRender品牌？",
      content: "我如何去除AnyRender品牌？",
    },
    {
      title: "我可以在商业上使用AnyRender吗？",
      content: "我可以在商业上使用AnyRender吗？",
    },
    {
      title: "为什么专业计划有收入限制？",
      content: "为什么专业计划有收入限制？",
    },
  ]);

  let activeName = ref("1");

  function jump(path) {
    router.push(path);
  }

  function clickItem(i) {
    if (i == 0) {
    } else if (i == 1 || i == 2) {
    } else {
      jump("/business/contact");
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/styles/variables.scss";

  .forum-header {
    padding: 48px 0;

    .container {
      .forum-header-title {
        font-size: 64px;
        font-weight: 500;
        color: #000;
        line-height: 1.6;
        text-align: center;
        letter-spacing: 3px;
      }
      .forum-header-content {
        margin: 20px auto;
        line-height: 1.6;
        text-align: center;
        font-size: 32px;
      }
    }
    // 响应式 电脑
    @media (max-width: $breakpoint-desktop) {
      .container {
        .forum-header-title {
          font-size: 50px;
          letter-spacing: 2px;
        }
        .forum-header-content {
          font-size: 28px;
        }
      }
    }
    // 响应式 平板
    @media (max-width: $breakpoint-tablet) {
      padding: 32px 0;
      .container {
        .forum-header-title {
          font-size: 38px;
        }
        .forum-header-content {
          font-size: 24px;
        }
      }
    }
    // 响应式 手机
    @media (max-width: $breakpoint-mobile) {
      padding: 24px 0;
      .container {
        .forum-header-title {
          font-size: 32px;
        }
        .forum-header-content {
          font-size: 20px;
        }
      }
    }
  }
  .price-section {
    padding: 0 0 20px;
    .container {
      .price-content {
        display: flex;
        justify-content: space-between;
        gap: 28px;
        .price-item {
          position: relative;
          flex: 1 1 calc(25% - 21px);
          border-radius: 12px;
          padding: 40px 15px;
          border: 1px solid #e0e0e0;
          &:nth-child(2) {
            .price-tag {
              .price-tag-text {
                background-color: #8246fb;
              }
            }
            .price-button {
              border-color: #8246fb;
              background-color: #8246fb;
              color: #fff;
              &:hover {
                background-color: #5c9ff8;
                border-color: #5c9ff8;
              }
            }
          }
          &:nth-child(3) {
            background-color: #efefef;
            .price-tag {
              .price-tag-text {
                background-color: #5c9ff8;
              }
            }
            .price-discount {
              color: #929292;
            }
            .price-button {
              border-color: #5c9ff8;
              background-color: #5c9ff8;
              color: #fff;
              &:hover {
                background-color: #8246fb;
              }
            }
          }
          &:nth-child(4) {
            background-color: #f5f5f5;
            .price-tag {
              .price-tag-text {
                background-color: #2a2a2a;
              }
            }
            .price-discount {
              color: #929292;
              text-decoration: underline;
              cursor: pointer;
            }
            .price-button {
              border-color: #343434;
              background-color: #343434;
              color: #fff;
              &:hover {
                background-color: #8246fb;
                border-color: #8246fb;
              }
            }
          }
          .price-switch {
            position: absolute;
            top: 10px;
            right: 10px;
            :deep(.el-switch__label) {
              color: #929292 !important;
              &.is-active {
                color: #000 !important;
                font-weight: 500;
              }
            }
          }
          .price-tag {
            margin-bottom: 8px;
            .price-tag-text {
              display: inline-block;
              font-size: 14px;
              color: #fff;
              background-color: #7bcfab;
              padding: 1px 8px;
              border-radius: 6px;
            }
          }
          .price-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            .price-current {
              flex: 1 1 70%;
              font-size: 24px;
              font-weight: 500;
            }
            .price-current-desc {
              flex: 1 1 30%;
              font-size: 14px;
              color: #585858;
              word-break: break-all;
            }
          }
          .price-desc {
            font-size: 14px;
            color: #929292;
            padding: 10px 0;
          }
          .price-discount {
            min-height: 20px;
            font-size: 14px;
            color: #5200fa;
            padding: 10px 0 20px;
          }
          .price-button {
            font-size: 14px;
            color: #000;
            text-align: center;
            border-radius: 10px;
            border: 1px solid #000;
            padding: 6px 10px;
            margin-bottom: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            &:hover {
              background-color: #000;
              color: #fff;
            }
          }
          .tips-title {
            font-size: 14px;
            color: #929292;
            padding: 10px 0;
          }
          .tips-list {
            .tips-item {
              font-size: 14px;
              color: #929292;
              line-height: 2;
              &:before {
                content: "✔";
                font-size: 12px;
              }
              :deep(strong) {
                color: #8d8d8d;
              }
            }
          }
          .plus-list {
            margin-top: 30px;
            .plus-item {
              font-size: 14px;
              color: #929292;
              line-height: 2;
              &:before {
                content: "+";
                font-weight: 600;
              }
              :deep(strong) {
                color: #8d8d8d;
              }
            }
          }
        }
      }
      // 响应式 电脑
      @media (max-width: $breakpoint-desktop) {
        .price-content {
          flex-wrap: wrap;
          gap: 20px;
          .price-item {
            flex: 1 1 calc(50% - 20px);
          }
        }
      }
      // 响应式 平板
      @media (max-width: $breakpoint-tablet) {
        .price-content {
          .price-item {
            flex: 1 1 100%;
          }
        }
      }
    }
  }

  .logo-list-section {
    padding: 0 0 20px;
    .container {
      .logo-list {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        .logo-item-img {
          height: 72px;
          cursor: pointer;
        }
      }
      // 响应式 大屏幕
      @media (max-width: $breakpoint-large-desktop) {
        .logo-list {
          gap: 14px;
          .logo-item-img {
            height: 66px;
          }
        }
      }
      // 响应式 电脑
      @media (max-width: $breakpoint-desktop) {
        .logo-list-title {
          font-size: 36px;
          letter-spacing: 8px;
          margin: 30px 0;
        }
        .logo-list {
          flex-wrap: wrap;
          gap: 12px;
          .logo-item-img {
            height: 54px;
          }
        }
      }
      // 响应式 平板
      @media (max-width: $breakpoint-tablet) {
        .logo-list-title {
          font-size: 26px;
          letter-spacing: 6px;
          margin: 20px 0;
        }
        .logo-list {
          gap: 10px;
          .logo-item-img {
            height: 40px;
          }
        }
      }
      // 响应式 手机
      @media (max-width: $breakpoint-mobile) {
      }
    }
  }

  .plan-section {
    padding: 20px 0 40px;
    .container {
      .plan-content {
        .plan-title {
          font-size: 44px;
          font-weight: 500;
          color: #000;
          text-align: center;
          margin-bottom: 20px;
        }
        .plan-desc {
          font-size: 14px;
          color: #929292;
          text-align: center;
          padding: 10px 0;
        }
        .plan-img-list {
          margin-top: 40px;
          img {
            display: block;
            margin: 0 auto 20px;
            width: 65%;
            border-radius: 20px;
            overflow: hidden;
            object-fit: cover;
            box-shadow: 2px 4px 8px 8px rgba(0, 0, 0, 0.05);
          }
        }
        .plan-img-tips {
          text-align: center;
          font-size: 14px;
          color: #929292;
          margin: 10px 0;
        }
      }
      // 响应式 大屏幕
      @media (max-width: $breakpoint-xl) {
        .plan-content {
          .plan-title {
            font-size: 36px;
          }
          .plan-img-list {
            img {
              width: 80%;
            }
          }
        }
      }
      // 响应式 电脑
      @media (max-width: $breakpoint-desktop) {
        .plan-content {
          .plan-title {
            font-size: 32px;
          }
          .plan-img-list {
            img {
              width: 80%;
            }
          }
        }
      }
      // 响应式 平板
      @media (max-width: $breakpoint-tablet) {
        .plan-content {
          .plan-title {
            font-size: 28px;
          }

          .plan-img-list {
            img {
              width: 100%;
            }
          }
        }
      }
    }
  }

  .question-section {
    padding: 0 0 20px;
    .container {
      .question-content {
        .question-title {
          font-size: 36px;
          font-weight: 500;
          color: #000;
          text-align: center;
          margin-bottom: 40px;
        }
        :deep(.el-collapse) {
          &.question-list {
            border: none;
            background-color: transparent;
            .question-item {
              margin-bottom: 20px;
              background-color: #efefef;
              border-radius: 16px;
              padding: 10px 25px;
              .el-collapse-item__header {
                background-color: transparent;
                color: #3e3e3e;
                font-size: 18px;
                height: 50px;
                justify-content: space-between;
                line-height: 1.2;
                .el-icon {
                  margin: 0;
                }
              }
              .el-collapse-item__wrap {
                background-color: transparent;
                .el-collapse-item__content {
                  font-size: 16px;
                  color: #585858;
                }
              }
            }
          }
        }
      }
      // 响应式 电脑
      @media (max-width: $breakpoint-desktop) {
        .question-content {
          .question-title {
            font-size: 32px;
            margin-bottom: 40px;
          }
          :deep(.el-collapse) {
            &.question-list {
              .question-item {
                margin-bottom: 20px;
                padding: 10px 20px;
                .el-collapse-item__header {
                  font-size: 18px;
                  height: 50px;
                }
                .el-collapse-item__wrap {
                  .el-collapse-item__content {
                    font-size: 16px;
                  }
                }
              }
            }
          }
        }
      }
      // 响应式 平板
      @media (max-width: $breakpoint-tablet) {
        .question-content {
          .question-title {
            font-size: 32px;
            margin-bottom: 40px;
          }
          :deep(.el-collapse) {
            &.question-list {
              .question-item {
                margin-bottom: 15px;
                padding: 6px 15px;
                .el-collapse-item__header {
                  font-size: 16px;
                  height: 40px;
                }
                .el-collapse-item__wrap {
                  .el-collapse-item__content {
                    font-size: 14px;
                  }
                }
              }
            }
          }
        }
      }
      // 响应式 手机
      @media (max-width: $breakpoint-mobile) {
        .question-content {
          .question-title {
            font-size: 28px;
            margin-bottom: 30px;
          }
        }
      }
    }
  }
</style>
